<template>
  <a-drawer
      :title="editId ? '调档信息修改' : '新增调档信息'"
      width="520"
      :closable="false"
      :visible="visible"
      @close="onClose"
    >
    <a-form :form="form">
      <a-form-item
        label="所属院系"
        :labelCol="{span: 7,offset: 1}"
        :wrapperCol="{span: 15, offset: 1}"
      >
        <a-select @change="yxChange" labelInValue v-decorator="[
          'ssyx',
          {
            rules: [{ required: true, message: '请选择所属院系!' }],
          }
        ]" showSearch :filterOption="filterOption">
          <a-select-option v-for="i in yxList" :key="i.id" :value="i.dwh">{{ i.dwh + ' ' + i.dwmc }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="考生类别"
        :labelCol="{span: 7,offset: 1}"
        :wrapperCol="{span: 15, offset: 1}"
      >
        <a-select @change="kslbChange" v-decorator="[
          'kslb',
          {
            rules: [{ required: true, message: '请选择考生类别!' }],
          }
        ]" showSearch :filterOption="filterOption">
          <a-select-option v-for="i in TYPE0353" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
        </a-select>
      </a-form-item>
      
      <a-form-item
        label="所属专业"
        :labelCol="{span: 7,offset: 1}"
        :wrapperCol="{span: 15, offset: 1}"
      >
        <a-select allowClear placeholder="全部" labelInValue v-decorator="[
          'sszy',
          {
            rules: [{ required: false, message: '请选择所属专业!' }],
          }
        ]" showSearch :filterOption="filterOption">
          <a-select-option v-for="i in zyList" :key="i.id" :value="i.zyh">{{ i.zyh + ' ' + i.zymc }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="院系名称" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 15, offset: 1}">
        <a-input v-decorator="[
          'ssyxmc',
          {
            rules: [{ required: false, message: '请输入院系名称!' }],
          }
        ]"/>
      </a-form-item>
      <a-form-item label="档案接收人" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 15, offset: 1}">
        <a-input v-decorator="[
          'dajsr',
          {
            rules: [{ required: true, message: '请输入档案接收人!' }],
          }
        ]"/>
      </a-form-item>
      <a-form-item label="档案接收详细地址" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 15, offset: 1}">
        <a-textarea v-decorator="[
          'dajsdz',
          {
            rules: [{ required: true, message: '请输入档案接收详细地址!' }],
          }
        ]"/>
      </a-form-item>
      <a-form-item label="联系电话" :labelCol="{span: 7,offset: 1}" :wrapperCol="{span: 15, offset: 1}">
        <a-textarea v-decorator="[
          'lxdh',
          {
            rules: [{ required: true, message: '请输入联系电话!' }],
          }
        ]"/>
      </a-form-item>
      <a-button @click="showStuList">点击选择学生</a-button>
      <a-button @click="remoteStu">删除</a-button>
      <a-table 
        :columns="columns1" 
        :data-source="stuData" 
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :pagination="false">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <a slot="optional" slot-scope="text, record, index" @click="removeStu(index)">删除</a>
      </a-table>
    </a-form>

    <a-drawer
      title="选择学生"
      width="600"
      :closable="false"
      :visible="childrenDrawer"
      @close="childrenDrawer = false"
    >
      <p>学生编号 <a-input style="width: 200px" v-model="ksParams.ksbh"></a-input>
        学生姓名 <a-input style="width: 200px" v-model="ksParams.ksxm"></a-input></p>
      <p> <a-button @click="$refs.table.refresh(true)">查询</a-button></p>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        :alert="options.alert"
        :rowSelection="options.rowSelection"
        :scroll="{y: 300}">

        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
      </s-table>
      <a-button @click="confirmStu" type="primary">
        确定
      </a-button>
    </a-drawer>

    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
        zIndex: 1
      }"
    >
      <a-button style="marginRight: 8px" @click="onClose">
        取消
      </a-button>
      <a-button type="primary" @click="submit">
        确定
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import { STable } from '~'
import { mapState } from 'vuex'

export default {
  props: ['visible', 'editId', 'selectMenu', 'confirmLoading'],
  components: {
    STable
  },
  data () {
    return {
      yxList: [],
      zyList: [],
      childrenDrawer: false,
      ksParams: {},
      stuData: [],
      columns: [
        // {
        //   title: '序号',
        //   scopedSlots: { customRender: 'serial' }
        // },
        {
          title: '考生编号',
          dataIndex: 'ksbh'
        },
        // {
        //   title: '考生培养层次码名称',
        //   dataIndex: 'kspyccmc'
        // },
        {
          title: '考生姓名',
          dataIndex: 'ksxm'
        },
        // {
        //   title: '考生证件号',
        //   dataIndex: 'zjhm'
        // }
      ],
      columns1: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '考生编号',
          dataIndex: 'ksbh'
        },
        {
          title: '考生姓名',
          dataIndex: 'ksxm'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'optional' }
        },
      ],
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      loadData: parameter => {
        if (!this.$refs.table) {
          return new Promise()
        }
        this.$refs.table.updateSelect(this.stuData.map(s => s.id), this.stuData)
        parameter.pageNum = parameter.pageNo
        let params = Object.assign(this.ksParams, parameter)
        return this.$api.base.ksList(params).then(res => {
          return {
            data: res.data.rows,
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize,
            totalPage: Math.ceil(res.data.total / parameter.pageSize),
            totalCount: res.data.total
          }
        })
      },
      ksxxIds: []
    }
  },
  computed: {
    ...mapState({
      TYPE0353: state => state.app['TYPE0353'],
    }),
    routeName () {
      return this.$route.name
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0353')
    this.$api.base.collegeAll().then(res => {
      this.yxList = res.data
    })
  },
  methods: {
    onClose () {
      this.$emit('cancel')
      this.selectedRowKeys = []
    },
    yxChange(yx, notClear = false) {
      if (!notClear) {
        this.form.setFieldsValue({ sszy: {} });
      }
      if (yx && this.form.getFieldValue('kslb')) {
        // console.log(yx)
        this.stuData = []
        this.$api.base.majorAll({lsdwh: yx.key,zycc: this.form.getFieldValue('kslb')}).then(res => {
          this.zyList = res.data
        })
      }
    },
    kslbChange (kslb, notClear = false) {
      if (!notClear) {
        this.form.setFieldsValue({ sszy: {} });
      }
      if (kslb && this.form.getFieldValue('ssyx')) {
        this.stuData = []
        this.$api.base.majorAll({lsdwh: this.form.getFieldValue('ssyx').key,zycc: kslb}).then(res => {
          this.zyList = res.data
        })
      }
    },
    showStuList () {
      if (!this.form.getFieldValue('ssyx')) {
        return this.$message.warn('请先选择院系')
      }
      if (!this.form.getFieldValue('kslb')) {
        return this.$message.warn('请先选择考生类别')
      }
      this.ksParams.ssyxm = this.form.getFieldValue('ssyx').key
      this.ksParams.kslb = this.form.getFieldValue('kslb')
      this.childrenDrawer = true
      this.$nextTick(() => {
        this.$refs.table.refresh(true)
        // this.options.rowSelection.selectedRowKeys = this.stuData.map(s => s.id)
        // this.options.rowSelection.selectedRows = this.stuData
        this.$refs.table.updateSelect(this.stuData.map(s => s.id), this.stuData)
      })
      // this.$api.base.ksList({ssyxm: this.form.getFieldValue('ssyx').key})
    },
    confirmStu () {
      console.log(this.selectedRowKeys)
      // this.$parant.
      // console.log(this.$parent)
      // this.ksxxIds = this.selectedRowKeys
      let selectedStus = JSON.parse(JSON.stringify(this.stuData))
      this.selectedRows.forEach(r => {
        if (!selectedStus.find(s => s.id === r.id)) {
          this.stuData.push(r)
        }
      })
      // this.stuData = this.selectedRows
      // let selectedIds = this.stuData.map(s => s.id)
      // if (selectedIds.indexOf()) {
        
      // }
      // this.selectedRow.
      // this.stuData.filter(s => s.id.find())
      this.childrenDrawer = false
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    remoteStu () {
      this.stuData = this.stuData.filter((s, index) => !this.selectedRowKeys.includes(index))
      this.selectedRowKeys = []
    },
    filterOption (value, options) {
      return options.componentOptions.children[0].text.indexOf(value) !== -1
    },
    removeStu (index) {
      this.stuData.splice(index, 1)
    },
    submit () {
      this.$emit('create', {ksxxIds: this.stuData.map(a => a.id).join(',')})
    }
  }
}
</script>

<style>

</style>
